<template>
	<view class="pd20">
		<view class="flex aic">
			<view class="flex mgt20">
				<view v-for="i in shopInfo.skuImglist" class="imgBox">
					<image :src="i.img" mode="aspectFill" class="skuimg" :class="!i.isHave ? 'nohave' : ''"></image>
					<view class="qh" v-if="!i.isHave">缺货</view>
				</view>
			</view>
			<view class="miniSize flex aic jcc" @click="showSku">
				5款
				<u-icon name="arrow-right" size="12"></u-icon>
			</view>
		</view>
		<view class="money">￥{{ shopInfo.money }}</view>
		<view class="title">{{ shopInfo.name }}</view>
		<view class="tip">退货包邮最高减￥50</view>
		<view class="miniSize flex">
			<view class="mgr20">发货</view>
			<view class="flex column">
				<view class="c0 fs24">快递包邮</view>
				<view>现货 2天内发货</view>
			</view>
		</view>
		<view class="miniSize flex mgt10">
			<view class="mgr20">保障</view>
			<view class="flex">
				<view class="c0 fs24">7天无理由退货</view>
			</view>
		</view>
		<!-- 商品详细介绍 -->
		<u-parse :content="shopInfo.content" class="mgt20"></u-parse>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		shopInfo: {
			default: Object
		},
		showSku: {}
	}
};
</script>

<style lang="scss" scoped>
.imgBox {
	position: relative;
	width: 80rpx;
	height: 80rpx;
	margin-right: 30rpx;
	.skuimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		&.nohave {
			background-color: #999;
			opacity: 0.3;
		}
	}

	.qh {
		@include flex-box-set();
		background-color: #999;
		border-radius: 10rpx;
		opacity: 0.75;
		font-size: 18rpx;
		font-weight: bold;
		color: #fff;
		z-index: 100;
		position: absolute;
		left: 0;
		top: 0;
		width: 80rpx;
		height: 80rpx;
	}
}
.miniSize {
	font-size: 24rpx;
	color: #999;
	line-height: 1.7;
}
.money {
	color: #ff822e;
	font-weight: bold;
	font-size: 36rpx;
	margin: 15rpx 0;
}
.title {
	font-size: 32rpx;
	line-height: 55rpx;
}
.tip {
	border: 1px solid #eee;
	display: inline-flex;
	padding: 4rpx 8rpx;
	border-radius: 5rpx;
	color: #ff822e;
	font-size: 22rpx;
	margin-left: 4rpx;
	margin-bottom: 20rpx;
}
</style>